<template>
  <div>
      <Table
          :height="options.tableHeight"
          stripe
          ref="selection"
          :border="border"
          :columns="list.columns"
          :data="list.data"
          @on-selection-change="onSelectionChange"
          no-data-text="亲，没有找到相关记录哦！~"></Table>
        <div class="pager" v-if="hasPage">
            <Page
            :total="list.totalItem"
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer
            :page-size-opts='pageSizeOpts'
            placement="top"></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
  </div>
</template>
<script>
import table from "@/table";
export default {
  data() {
    return {
      currValue: [],
      options: {
        tableHeight: 300
      },
    }
  },
  components: {
  },
  props: {
      list: {
          type: Object,
          default: ()=> {}
      },
      translate: {
        type: Number,
        default: 0
      },
      border: {
        type: Boolean,
        default: false
      },
      hasPage: {
        type: Boolean,
        default: true
      },
      pageSizeOpts: {
        type: Array,
        default: () => [10, 20, 30, 40]
      },
      isInitHeight: {
        type: Boolean,
        default: true
      },
      tableHeight: {
        type: Number,
        default: 300
      }
  },
  mounted() {
    this.options.tableHeight = this.tableHeight
    if (this.isInitHeight) {
      this.initTable(this.translate);
    }
  },
  methods: {
      ...table,
      onSelectionChange(val) {
        this.$emit('onSelectionChange', val)
      },
      onPageChange(val) {
        this.backTableTop();
        this.$emit('onPageChange', val)
      },
      onPageSizeChange(val) {
        this.backTableTop();
        this.$emit('onPageSizeChange', val)
      },
      getData() {
          this.$emit('getData')
      },
      clearSelectAll() {
        this.$refs.selection.selectAll(false)
      }
  },
  computed: {
  },
}
</script>

